<template>
  <PersonDetailsHeader :title="title" />
  <div class="details">
    <div class="left">
      <img :src="personDetails?.image" alt="">
    </div>
    <div class="right">
      <p class="name">{{ personDetails?.name }}</p>
      <p class="info">{{personDetails?.sex}}<span>|</span>{{ personDetails?.age }}<span>|</span>{{ personDetails?.birthday }}<span>|</span>{{ personDetails?.education }}</p>
      <p class="work">工作经验: {{ personDetails?.age }}</p>
      <span class="price">{{ personDetails?.price }}元/月</span>
    </div>
  </div>
  <div class="introduce">
    <h3>个人介绍</h3>
    <p>{{ personDetails?.descs }}</p>
  </div>
  <div class="btn-content">
    <div class="btn">立即联系</div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { useRoute } from "vue-router"
import api from "../../api/index"

import PersonDetailsHeader from "../../components/PubHeaderComponent.vue"

const route = useRoute()

const title = "人才详情"

interface IPersonDetails {
  age: string,
  birthday: string,
  descs: string,
  education: string,
  id: number,
  image: string,
  name: string,
  price: string,
  sex: string
}

const personDetails = ref<IPersonDetails>()

onMounted(() => {
  api.getPersonDetails({ id: route.params.id }).then(res => {
    if (res.data.status == 200) {
      personDetails.value = res.data.data
    }
  })
})

</script>
<style lang="less" scoped>
.details {
  background: #fff;
  display: flex;
  padding: 10px;
  box-sizing: border-box;

  .left {
    img {
      width: 100px;
      border-radius: 5px;
    }
  }

  .right {
    padding: 10px;
    line-height: 30px;

    .name {
      font-size: 15px;
      font-weight: 700;
    }

    .info {
      font-size: 14px;
      color: #999;

      span {
        padding: 0 5px;
      }
    }

    .work {
      font-size: 14px;
      color: #999;
    }

    .price {
      font-size: 14px;
      color: #FF4444;
    }
  }
}

.introduce {
  background: #fff;
  margin-top: 10px;
  padding: 10px;

  h3 {
    font-size: 16px;
    padding: 10px 0;
  }

  p {
    font-size: 14px;
    color: #999;
    letter-spacing: 1.5px;
  }
}

.btn-content {
  width: 100%;
  text-align: center;
  margin: 30px 0;

  .btn {
    width: 80%;
    height: 40px;
    border-radius: 5px;
    line-height: 40px;
    background: #684886;
    color: #fff;
    margin: 0 auto
  }
}
</style>
